 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>offset和position测试1</title> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.js"></script> 
<style type="text/css"> 
body{margin:15px;width:960px;} 
.parent{ 
border:3px solid #ccc; 
width:600px; 
height:300px; 
margin-left:55px; 
padding:25px; 
} 
.child{ 
background:#666; 
width:200px; 
height:200px; 

color:#fff; 
} 
.copyright{ 
position:absolute; 
right:0; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".child").each(function(){ 
var text = "position().left="+$(this).position().left; 
text +="<br>position().top="+$(this).position().top; 
text +="<br>offset().left="+$(this).offset().left; 
text +="<br>offset().top="+$(this).offset().top; 
text +="<br>其parent的offset().top="+$(this).parents(".parent").offset().top; 
text +="<br>其parent的offset().left="+$(this).parents(".parent").offset().left; 
$(this).html(text); 
}); 

}); 
</script> 
</head> 
<body> 

<div class="parent" style="float:right"> 
父容器的position是默认值，也就是static,子容器的position为默认值，也是static,这个时候，offset和position值相同<br><br><br> 
<div class="child"></div> 
</div> 
<div style="clear:both"></div> 
<br> 
<div class="parent" style="position:relative"> 
父容器的position是相对定位，也就是ralative,子容器的position为默认值，也是static,这个时候，offset和position值不同 
<div class="child"></div> 
</div> 
<br> 
<div style="position:absolute;padding:15px;border:3px solid #ff0000;"> 
<div class="parent"> 
父容器的position是绝对定位，也就是absolute,子容器的position为默认值，也是static,这个时候，offset和position值不同 
<div class="child"></div> 
</div> 
</div> 

<div class="copyright"><a href="http://www.playgoogle.com">©playgoogle.com</a></div> 
</body> 
</html> 
